<template>
    <div class="scenic_spot_heating">
        <div class="common_header" style="padding-bottom: 0.2rem">
            <div class="header-img"><img src="../assets/imgs/nav_bar_return@2x.png" alt="" @click="$router.go(-1)"></div>
            <div class="header-title">意见反馈</div>
        </div>
        <div class="content field-text">
            <div style="position:relative;">
                <van-field
                        v-model="message"
                        type="textarea"
                        placeholder="请输入遇到的问题，我们将不断改进…"
                        autosize
                        class="field"
                        maxlength="200"
                />
                <span class="textareaNum"><span>{{textareaNum}}</span>/200</span>
            </div>
            <div style="text-align: center">
                <van-button type="primary" size="large" @click="postFeedBack" style="border: none;" :disabled="loading" :loading="loading" loading-text="提交中...">提交反馈</van-button>
            </div>
        </div>

    </div>
</template>

<script>
    import {Notify,Field,CellGroup,Button,Toast} from 'vant';
    export default {
        name: "scenicSpotHeating",
        components: {
            [Notify.name]: Notify,
            [CellGroup.name]: CellGroup,
            [Button.name]: Button,
            [Toast.name]: Toast,
            [Field.name]: Field
        },
        data() {
            return {
                message:'',
                loading: false,
                textareaNum: 0
            }
        },
        watch: {
            message: function (newValue) {
                if (newValue.length <= 200) {
                    this.textareaNum = newValue.length;
                } else {
                    Toast({
                        message: '不超过200字~',
                        duration: 1000
                    });
                }
            }
        },
        mounted() {
        },
        methods:{
            postFeedBack() {
                this.loading = true;
                let params={
                    value: this.message
                }
                this.$http.post('auth/feedback',params)
                    .then((result)=>{
                        if (result.status_code == 200) {
                            this.message = '';
                            Notify({
                                message: '反馈成功！',
                                duration: 1000,
                                background: '#3ca5ff'
                            })
                        } else {
                            Notify({
                                message: result.msg,
                                duration: 1000,
                                background: '#ff0000'
                            })
                        }
                        this.loading = false;
                    })
            }
        }
    }
</script>
<style lang="less">
    .field-text{
        .textareaNum {
            position: absolute;
            bottom: 0.08rem;
            right: 6%;
            color:rgba(172,178,199,1);
            font-size: 0.12rem
        }
        .van-cell{
            padding: 0.1rem 0.15rem 0.2rem;
        }
        .van-hairline--top-bottom::after{
            border-width: 0rem;
        }
        .van-button{
            margin-top: 0.3rem;
            width: 3.43rem;
            height: 0.44rem;
            line-height: 0.44rem;
            font-size: 0.15rem;
        }
        .van-button--primary{
            background:rgba(66,108,255,1);
            box-shadow:0px 0.08rem 0.24rem 0px rgba(66,108,255,0.3);
        }
    }

</style>
<style scoped lang="less">
    .content{
       padding: 1.4rem 0 0;
        .field{
            width:3.43rem;
            height:2rem;
            margin: 0 auto;
            border-radius:0.04rem;
            border:1px solid rgba(235,237,244,1);
        }
    }
</style>